<template>
  <div class="process-container">
    <!-- 顶部工具栏 -->
    <ProcessToolbar @save="handleSave" @export="handleExport" @import="handleImport" @fitToContent="handleFitToContent" />
    <div class="process-content">
      <!-- 左侧节点区域 -->
      <div class="process-left">
        <NodePanel ref="nodePanelRef" @nodeSelected="handleNodeSelected" />
      </div>

      <!-- 中间画布区域 -->
      <div class="process-center">
        <ProcessCanvas ref="canvasRef" :currentNode="currentNode" @nodeSelected="handleCanvasNodeSelected"/>
      </div>

      <!-- 右侧属性配置区域 -->
      <div class="process-right">
        <NodeConfig
          :current-node="currentNode"
          @update-node="handleNodeUpdated"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

import NodePanel from "./components/NodePanel.vue";
import ProcessCanvas from "./components/ProcessCanvas.vue";
import NodeConfig from "./components/NodeConfig.vue";
import ProcessToolbar from "./components/ProcessToolbar.vue";

// 引用组件实例
const nodePanelRef = ref(null);
const canvasRef = ref(null);
// 选中的节点
const currentNode = ref(null);
const handleNodeSelected = (data) => {
  // 只在拖拽时调用ProcessCanvas的startDrag，不要设置currentNode
  if (canvasRef.value && canvasRef.value.startDrag) {
    canvasRef.value.startDrag(data);
  }
};

// 处理画布节点选中事件
const handleCanvasNodeSelected = (node) => {
  console.log('画布节点被选中', node);
  currentNode.value = node;
};

// 保存流程
const handleSave = () => {
  if (canvasRef.value) {
    canvasRef.value.exportGraphJSON();
    ElMessage.success("保存流程");
  } else {
    ElMessage.warning("导出失败，画布未初始化");
  }
};

// 导出流程
const handleExport = () => {
  if (canvasRef.value) {
    canvasRef.value.exportGraph();
    ElMessage.success("导出成功，图片已保存");
  } else {
    ElMessage.warning("导出失败，画布未初始化");
  }
};

// 导入流程
const handleImport=()=>{
  
  if (canvasRef.value) {
    canvasRef.value.importGraphJSON();
    ElMessage.success("导入流程");
  } else {
    ElMessage.warning("导入失败，画布未初始化");
  }
}

// 自适应画布
const handleFitToContent = () => {
  if (canvasRef.value) {
    canvasRef.value.fitToContent();
    ElMessage.success("画布已自适应内容");
  } else {
    ElMessage.warning("自适应失败，画布未初始化");
  }
}
</script>

<style lang="scss" scoped>
.process-container {
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  

  .process-content {
    flex: 1;
    display: flex;
    overflow: hidden;
  }

  .process-left {
    width: 240px;
    height: 100%;
    overflow-y: auto;
  }

  .process-center {
    flex: 1;
    height: 100%;
    position: relative;
  }

  .process-right {
    width: 300px;
    height: 100%;
    overflow-y: auto;
  }
}
</style>
